<template>
    <div class="recipes-nav">
        <ul class="r-nav">
            <router-link :to="{name:'RecipesImg'}" custom v-slot="{navigate,isActive}">
                <li @click="navigate" :class="isActive?'r-act':''">图片管理</li>
            </router-link>
            <router-link :to="{name:'RecipesAdd'}" custom v-slot="{navigate,isActive}">
                <li @click="navigate" :class="isActive?'r-act':''">
                    添加食谱
                </li>
            </router-link>
            <router-link :to="{name:'RecipesList'}" custom v-slot="{navigate,isActive}">
                <li @click="navigate" :class="isActive?'r-act':''">食谱列表</li>
            </router-link>
        </ul>
    </div>
</template>

<script>

</script>

<style lang="less" scoped>
.recipes-nav{
    width: 100%;height: 40px;
    line-height:40px;
    background-color: #FFBD6C;
    margin:0;
    .r-nav{
        overflow: hidden;
        height: 40px;width: 100%;
        li{
            float: left;
            height: 40px;width: 100px;
            text-align: center;
            line-height: 40px;
            font-size:16px;
            color: #fff;
            &:hover{
                cursor: pointer;
            }
        }
        li:first-child{
            margin-left:20px;
        }
        .r-act{
            background-color: #fff;
            color: #000;
            font-weight: bold;
        }
    }
}
</style>
